<!--
*角色List页面
* -->
<!DOCTYPE html>
<html>
<head>
    <title>ManaGement PlatForm</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>


    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">


</head>

<style>
    .form-group > .col-sm-4 {
        padding: 0;
    }


    .more-condition-search .fa {
        margin-left: 5px;
    }

    .panel-body {
        padding-bottom: 5px;
    }
</style>
<body>
<script type="text/javascript">


</script>

<div id="rrapp" v-cloak>
    <form class="form-horizontal" id="myForm">
        <div class="pull-center" id="query-form" style="padding-bottom:10px;">
            <div class="panel-body">
                <div class="form-group search-condition-1">
                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">名称查询</label>
                        <div class="col-sm-8">
                            <input type="text" id="serviceNamebak" name="serviceName"
                                   style="width:100%"
                                   data-bind="value:model.serviceName,events:{change:editServiceName}"
                                   class="k-textbox">
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">角色查询</label>
                        <div class="col-sm-8">
                            <input type="text" id="conversationId" name="conversationId"
                                   style="width:100%"
                                   data-bind="value:model.conversationId" class="k-textbox">
                        </div>


                    </div>

                    <div class="col-sm-4">
                        <div class="col-sm-8">
                            <span id="selectList" class="btn btn-primary" style="float:left;margin-right:5px;"
                                  data-bind="click:selectList"
                                  type="submit"><i class="fa fa-search" style="margin-right:3px;"></i>查询</span>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </form>

    <div class="pull-left" id="query-reset" style="padding-bottom:10px;">

        <a id="queryInfo" class="btn btn-success" style="float:left;margin-right:5px;"
           @click="add"><i class="fa fa-plus-square" style="margin-right:3px;"></i>添加</a>
        <a id="update" class="btn btn-primary" style="float:left;margin-right:5px;"
           @click="update"><i class="fa fa-plus-square" style="margin-right:3px;"></i>编辑</a>
        <a id="deteleInfo" class="btn btn-danger" style="float:left;margin-right:5px;"
           @click="del"><i class="fa fa-plus-square" style="margin-right:3px;"></i>删除</a>

    </div>

    <div style="clear:both">
        <div id="grid"></div>
    </div>
    <div style="clear:both;display: none">
        <div id="grids"></div>
    </div>

</div>


<div id="editWin"></div>
<div id="useRedit"></div>
<script>


    var vm = new Vue({
        el: '#rrapp',
        data: {
            showList: true,
            title: null,

        },
        methods: {
            getMenu: function (menuId) {


            },
            add: function () {
                $("#editWin").kendoWindow({
                    actions: ["Maximize", "Minimize", "Close"],
                    draggable: true,
                    height: "85%",
                    width: "90%",
                    content: "/wedding_admin/sys/um/sys_role_list_add.html",//?instId=" + data.instId + "&isedit=1" + "&status=" + data.status
                    iframe: true,
                    modal: true,
                    close: function () {
                        $("#editWin").empty();

                        // $('#grid').data('kendoGrid').dataSource.query();
                    }
                })

                var win = $("#editWin").data("kendoWindow");

                win.center().open();

                // e.preventDefault();
                vm.title = null
            },
            update: function () {
                var grid = $("#grid").data("kendoGrid");
                var checked = grid.selectedDataItems();
                if (grid.selectedDataItems().length==0) {
                    alert("请选择一条记录");
                    return;
                }

                $("#useRedit").kendoWindow({
                    actions: ["Maximize", "Minimize", "Close"],
                 //   title: $l("编辑页面"),
                    draggable: true,
                    height: "85%",
                    width: "90%",
                    content: "/wedding_admin/sys/um/sys_role_list_edit.html?role_id="+checked[0].id,//?instId=" + data.instId + "&isedit=1" + "&status=" + data.status
                    iframe: true,
                    modal: true,
                    close: function () {
                        $("#useRedit").empty();
                    }
                })

                var win = $("#useRedit").data("kendoWindow");

                win.center().open();


            },
            del: function () {

                var grid = $("#grid").data("kendoGrid");
                 var checked = grid.selectedDataItems();

                 if (grid.selectedDataItems().length==0) {
                     alert("请选择一条记录");
                     return;
                 }

                var rs = confirm('确定要删除选中的记录？');
                if (rs) {

                    $.ajax({
                        type: "POST",
                        url: "/wedding_admin/sys/sysrole/delete",
                        data: "roleIds=" + checked[0].id,
                        success: function (r) {
                            if (r.code === 0) {
                                alert('操作成功');
                                var grid = $("#grid").data("kendoGrid");//重新读取数据库写法  刷新页面·
                                grid.dataSource.read();

                            } else {
                                alert(r.msg);
                            }
                        }
                    });

                }
            },
            reload: function () {
                vm.showList = true;
                Menu.table.refresh();
            }


        }
    });

    var Menu = {
        id: "menuTable",
        table: null,
        layerIndex: -1
    };






    var crudServiceBaseUrl = "/wedding_admin/sys/sysrole/list",
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl,
                    type: "POST",
                    dataType: "json"
                },
                parameterMap: function (options, type) {

                    if (type !== "read" && options.page) {

                        var datas = Hap.prepareSubmitParameter(options, type);

                        return kendo.stringify(datas);
                    } else if (type === "read") {

                        return {//分页参数
                            limit: options.pageSize,  //当前页码
                            page: options.page  //每页显示记录数

                        }
                    }
                }
            },
            batch: true,
            serverPaging: true,
            pageSize: 10,
            schema: {
                data: function (data) {
                    return data.page.list;
                },
                total: function (data) {
                    return data.page.totalCount;
                },
                model: {
                    id: "roleId",
                    fields: {
                        create_time: {type: "date", format: "{0:yyyy-MM-dd HH:mm:ss}"}
                    }
                }
            }


        });


    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        dataBound: function () {

            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('HSP_SERVICE_INSTANCE')
            }
        },
        resizable: true,
        scrollable: true,
        navigatable: false,
        editable: false,
        selectable: 'multiple,rowbox',
        pageable: {
            pageSizes: [10, 20, 50, 100, 200, 500],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "roleId",
                title: '角色ID',
                width: 80,

                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "roleName",
                title: '角色名称',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "deptName",
                title: '部门名称',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "remark",
                title: '备注',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "createTime",
                title: '创建时间',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                attributes: {style: "text-align:center"},
                title: '编辑',
                command: [{
                    name: 'edit',
                    template: '<a href="javascript:void(0)" class="k-grid-edit">详情</a>',
                    click: function (e) {
                        var data = this.dataItem($(e.target).closest("tr"));

                        var onClose = function () {
                            $("#editWin").empty();
                        };

                        $("#editWin").kendoWindow({
                            actions: ["Maximize", "Minimize", "Close"],
                            draggable: true,
                            height: "85%",
                            width: "90%",
                            content: "/wedding_admin/sys/um/sys_role_list_infouser_.html?role_id="+data.roleId,//?instId=" + data.instId + "&isedit=1" + "&status=" + data.status
                            iframe: true,
                            modal: true,
                            close: function () {
                                $("#editWin").empty();
                                // $('#grid').data('kendoGrid').dataSource.query();
                            }
                        });
                        var win = $("#editWin").data("kendoWindow");
                        vm.title = null
                        win.center().open();
                        e.preventDefault();
                    }
                }],
                width: 70,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                }
            }
        ]
    }).data("kendoGrid");


    var container = $("#backupWindow");
    kendo.init(container);
    container.kendoValidator({
        invalidMessageType: "tooltip"
    });


    Hap.autoResizeGrid("#grid");

</script>

</body>
</html>
